import classNames from "classnames"

interface SvgProps {
	name: string // 图标的名称 ==> 必传
	color?: string //图标的颜色 ==> 非必传
	prefix?: string // 图标的前缀 ==> 非必传（默认为"icon"）
	iconStyle?: { [key: string]: any } // 图标的样式 ==> 非必传
	onClick?: (val: any) => void
	className?: string
}

export default function SvgIcon(props: SvgProps) {
	const { name, prefix = "icon", iconStyle = { width: 14, height: 14 }, onClick, color, className } = props
	const symbolId = `#${prefix}-${name}`
	return (
		<svg
			aria-hidden="true"
			style={iconStyle}
			onClick={onClick}
			color={color}
			className={classNames(
				{
					pointer: onClick
				},
				className
			)}
		>
			<use href={symbolId} />
		</svg>
	)
}
